<template>
    <div class="repair-wrap">
        <h2 v-if="historyData === null && queryData.data.code != 0" style="text-align: center; color: #e0001b">暂无维修历史记录</h2>
        <h2 v-if="historyData === null && queryData.data.code === 0" style="text-align: center; color: #e0001b">SN码错误</h2>

        <!-- 标题区域 -->
        <div class="title-wrap" v-if="historyData">
            <div class="title">最新老化历史记录</div>
            <el-button type="success" @click="openHistory">打开历史维修记录</el-button>
        </div>

        <!-- 内容区域 -->
        <div class="content-wrap" v-if="historyData">
            <div class="left">
                <div class="history-wrap">
                    <span style="font-size: 20px; color: #409eff"
                        ><p class="name">SN：</p>
                        {{ historyData.serialNumber }}</span
                    >
                    <span class="redColor"
                        ><p class="name">是否已维修：</p>
                        <span style="color: #43be86" v-if="historyData.isRepair">是</span>
                        <span style="color: #e0001b" v-if="!historyData.isRepair">否</span>
                    </span>
                    <span
                        ><p class="name">日志生成时间：</p>
                        {{ historyData.updateTime }}</span
                    >
                    <span
                        ><p class="name">Hash IC：</p>
                        {{ historyData.miningStrategy }}</span
                    >
                    <span
                        ><p class="name">模式：</p>
                        {{ historyData.serialNumber }}</span
                    >
                    <span
                        ><p class="name">工作状态：</p>
                        {{ historyData.status }}</span
                    >
                    <span
                        ><p class="name">时长：</p>
                        {{ historyData.totalRunningTime }}</span
                    >
                    <span
                        ><p class="name">本地算力(TH)：</p>
                        {{ historyData.averageHashRate }}</span
                    >
                    <span
                        ><p class="name">软件版本：</p>
                        {{ historyData.swVersion }}</span
                    >
                    <span>
                        <p class="name">老化结果：</p>
                        <p :class="historyData.runResult === 'pass' ? '':'redColor'">{{ historyData.runResult }}</p>
                    </span
                    >
                    <span class="redColor" v-if="historyData.error != '0x0'"
                        ><p class="name">Error Code：</p>
                        {{ historyData.error }}</span
                    >
                    <span class="redColor" v-if="historyData.error != '0x0'"
                        ><p class="name">错误描述：</p>
                        {{ historyData.errorDescribe }}
                        <!-- <div v-for="(item, index) in errorDetail" :key="index">
                            <span v-for="(objItem, objIndex) in item" :key="objIndex">{{ objItem }}</span>
                        </div> -->
                    </span>
                </div>
            </div>
            <ul class="right">
                <ul
                    class="item-wrap"
                    v-for="(board, boardIndex) in historyData.thirdChildren"
                    :key="boardIndex"
                    :class="boardIndex == historyData.thirdChildren.length - 1 ? '' : 'border-bottom'"
                >
                    <li class="form">
                        <span class="spanItem" style="font-size: 20px; color: #409eff"
                            ><p class="name">{{ board.computeBoardName }}：</p>
                            {{ board.sn }}</span
                        >
                        <span class="spanItem"
                            ><p class="name">算力版状态：</p>
                            {{ board.error === '0' ? 'pass' : board.error === '4000' ? 'pass' : 'fail' }}</span
                        >
                        <span class="spanItem" v-if="board.error != '4000' || board.error != '0'"
                            ><p class="name">Error Code：</p>
                            {{ board.error }}</span
                        >
                        <span class="spanItem"
                            ><p class="name">本地算力(TH)：</p>
                            {{ board.averageHashRate }}</span
                        >
                        <span class="errorItem">
                            <p class="name">错误描述：</p>
                            <p class="redColor">{{ board.errorDescribe }}</p>
                        </span>
                        <!-- <span class="errorItem" v-if="board.errorNum != '0' && board.errorNum != '4000'"
                            ><p class="name">错误描述：</p>
                            <div>
                                <ul
                                    class="redColor"
                                    style="display: flex; flex-direction: column; align-items: center"
                                    v-for="(error, errorIndex) in JSON.parse(board.errorDetail)"
                                    :key="errorIndex"
                                >
                                    <li v-for="(item, index) in error" :key="index">
                                        {{ item }}
                                    </li>
                                </ul>
                            </div>
                        </span> -->
                    </li>
                </ul>
            </ul>
        </div>

        <!-- 底部按钮 -->
        <div class="button-wrap">
            <div class="bottonBox">
                <el-button
                    v-if="historyData || (historyData === null && queryData.data.code === 0)"
                    class="error-btn"
                    type="success"
                    size="medium"
                    @click="goBack"
                    >返回上一页</el-button
                >
                <el-button
                    v-if="historyData"
                    class="button"
                    :disabled="historyData.isHasRepair === 'Y' ? true : false"
                    type="primary"
                    size="medium"
                    @click="openGuidance"
                    >进入维修指导界面</el-button
                >
            </div>
        </div>
    </div>
</template>

<script>
var that;
import { Toast } from 'vant';
import snSearch from '../../api/snSearch';
export default {
    data() {
        return {
            historyData: '', //老化历史记录数据
            errorDetail: '', //错误描述
            sn: '', //整机SN

            queryData: '', //请求返回数据
            // 是否维修
            isRepair:undefined
        };
    },
    created() {
        that = this;
        this.sn = this.$route.query.params;
        this.queryhistoryList(this.sn); //查询老化历史记录
    },
    methods: {
        // 打开历史记录
        openHistory() {
            let routeData = this.$router.resolve({
                path: '/repairHistory',
                query: {
                    sn: that.sn
                }
            });
            window.open(routeData.href, '_blank');
        },

        // 进入维修
        openGuidance() {
            // 把老化历史记录数据传入到维修界面
            let JsonData = JSON.stringify(this.historyData);
            this.$router.push({
                path: '/guidance',
                query: {
                    historyData: JsonData
                }
            });
        },

        // 查询老化历史记录
        queryhistoryList(sn) {
            // 加载提示框
            Toast.loading({
                duration: 0, //持续展示loading
                forbidClick: true,
                message: '加载中...'
            });
            snSearch({ sn: sn })
                .then((res) => {
                    Toast.clear(); //关闭提示框
                    console.log(res);
                    that.queryData = res;
                    // 如果SN码输入错误提示
                    if (res.data.code === 0 && res.data.data === null) {
                        Toast.fail({
                            message: 'SN码错误',
                            duration: 3000
                        });
                    }
                    that.historyData = res.data.data.mainBoard;
                    this.isRepair = res.data.data.isRepair
                    // 等待页面渲染完之后再把json字符串转成数组形式
                    // if (res.data.data.errorDetail) {
                    //     that.$nextTick(() => {
                    //         that.errorDetail = JSON.parse(res.data.data.errorDetail);
                    //     });
                    // }
                })
                .catch(() => {
                    Toast.clear(); //关闭提示框
                });
        },

        // 返回上一页
        goBack() {
            this.$router.go(-1);
        }
    }
};
</script>

<style lang="less" scoped>
.repair-wrap {
    // 标题区域
    .title-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
            font-weight: bold;
        }
    }

    // 内容区域
    .content-wrap {
        display: flex;
        margin-top: 10px;
        .left {
            width: 50%;
            padding: 5px;
            border-radius: 10px;
            background-color: #fff;
            .history-wrap {
                span {
                    display: flex;
                    align-items: center;
                    margin: 5px 0;
                    .name {
                        color: black;
                        font-weight: bold;
                    }
                }
                .redColor {
                    color: #e0001b;
                }
            }
        }
        .right {
            width: 50%;
            margin-left: 20px;
            border-radius: 10px;
            background-color: #fff;
            .item-wrap {
                margin: 2px 0;
                padding: 10px;
                .form {
                    .spanItem {
                        display: flex;
                        align-items: center;
                        margin: 5px 0;
                        .name {
                            color: black;
                            font-weight: bold;
                        }
                    }
                    .errorItem {
                        display: flex;
                        flex-flow: wrap;
                        .name {
                            color: black;
                            font-weight: bold;
                        }
                        .redColor {
                            color: #e0001b;
                        }
                    }
                }
            }
            .border-bottom {
                border-bottom: 4px solid #f0f0f0;
            }
        }
    }

    // 底部按钮区域
    .button-wrap {
        position: relative;
        margin-top: 40px;
        .bottonBox {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
        }
    }
}
</style>